<template>
  <div>
    <el-dialog title="认证详情" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
      <div v-loading="dialogLoading">
        <el-form ref="form" label-width="120px">
          <el-form-item label="真实姓名：">{{details.real_name}}</el-form-item>
          <el-form-item label="身份证号：">{{details.id_card}}</el-form-item>
          <el-form-item label="联系电话：">{{details.mobile}}</el-form-item>
          <el-form-item label="认证标签：">
            <span v-if="details.isccc_lable==0">智力残疾</span>
            <span v-if="details.isccc_lable==1">视力残疾</span>
            <span v-if="details.isccc_lable==2">听力残疾</span>
            <span v-if="details.isccc_lable==3">言语残疾</span>
            <span v-if="details.isccc_lable==4">肢体残疾</span>
            <span v-if="details.isccc_lable==5">精神残疾</span>
          </el-form-item>
          <el-form-item label="认证地区：">{{details.province_name}}{{details.city_name}}{{details.area_name}}</el-form-item>
          <el-form-item label="身份证：">
            <div>
              <el-popover v-if="details.id_card_front" placement="left" title trigger="hover">
                <img :src="details.id_card_front" style="height: 200px;margin-right: 10px;">
                <img slot="reference" @click="$openImg(details.id_card_front)" :src="details.id_card_front" style="height: 50px;width: 50px;margin-right: 10px;">
              </el-popover>
              <el-popover v-if="details.id_card_back" placement="left" title trigger="hover">
                <img :src="details.id_card_back" style="height: 200px;margin-right: 10px;">
                <img slot="reference" @click="$openImg(details.id_card_back)" :src="details.id_card_back" style="height: 50px;width: 50px;margin-right: 10px;">
              </el-popover>
            </div>
          </el-form-item>
          <el-form-item label="证明材料：">
            <div v-if="details.certificate&&details.certificate.length>0">
              <el-popover v-for="(v,i) in details.certificate" :key="i" placement="left" title trigger="hover">
                <img :src="v" style="height: 200px;margin-right: 10px;">
                <img slot="reference" @click="$openImg(v)" :src=" v" style="height: 50px;width: 50px;margin-right: 10px;">
              </el-popover>
            </div>
          </el-form-item>
          <el-form-item label="申请时间：">{{details.apply_time}}</el-form-item>
          <el-form-item label="办理状态：">
            <el-tag v-if="details.status===0">待审核</el-tag>
            <el-tag v-if="details.status===1" type="success">已通过</el-tag>
            <el-tag v-if="details.status===2" type="danger">已驳回</el-tag>
          </el-form-item>
          <el-form-item label="审核意见：" v-if="details.status===0">
            <el-radio v-model="form.status" :label="1">通过</el-radio>
            <el-radio v-model="form.status" :label="2">驳回</el-radio>
          </el-form-item>
          <el-form-item v-if="form.status===1&&details.status===0" label="认证福利包：">
            <el-select v-model="form.benefits_package_id" placeholder="请选择">
              <el-option v-for="(v,i) in packageList" :key="i" :label="v.free_name" :value="v.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="form.status===2&&details.status===0" label="驳回理由：">
            <el-input type="textarea" :rows="2" maxlength="200" placeholder="请输入内容" v-model="form.reason">
            </el-input>
          </el-form-item>
          <el-form-item v-if="details.status===1" label="认证福利包：">{{details.benefits_package_name}}</el-form-item>
          <el-form-item label="驳回理由：" v-if="details.status===2">{{details.reason}}</el-form-item>
          <el-form-item label="审核时间：" v-if="details.status!==0">{{details.update_time}}</el-form-item>
          <el-form-item label="审核人：" v-if="details.status!==0">{{details.audit_admin}}</el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取 消</el-button>
        <el-button type="primary" :loading="btnLoading" @click="check" v-if="details.status==0">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import authenticationService from '@/api/authenticationService.js'
export default {
  data () {
    return {
      details: {},
      dialogLoading: false,
      form: {},
      btnLoading: false,
      packageList: [],//福利包列表

    }
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number
    },
    type: {
      type: Number,
      default: 0
    }
  },
  created () {
    this.getPackageList()
  },
  computed: {
    dialogVisible: {
      get () {
        if (this.show) {
          this.getDetails()
        }
        this.form = {};
        return this.show
      },
      set (val) {
        this.$emit("update:show", val)
      }
    }
  },
  methods: {
    handleClose () {
      this.dialogVisible = false
    },
    // 获取详情
    getDetails () {
      this.dialogLoading = true;
      authenticationService.getDisabilityauthInfo(this.id).then(res => {
        if (res && res.data.code == 200) {
          this.details = res.data.data
          this.packageList.forEach(v => {
            if (v.id == this.details.benefits_package_id) {
              this.details.benefits_package_name = v.free_name
            }
          })
        }
        this.dialogLoading = false
      })
    },
    // 福利包下拉框
    getPackageList () {
      authenticationService.getAllFreeBag().then(res => {
        if (res && res.data.code == 200) {
          this.packageList = res.data.data
        }
      })
    },
    // 审核
    check () {
      if (!this.form.status) {
        this.$message.warning('请选择审核意见！');
        return
      } else if (!this.form.benefits_package_id && this.form.status === 1) {
        this.$message.warning('请选择福利礼包！')
        return
      } else if (!this.form.reason && this.form.status === 2) {
        this.$message.warning('请输入驳回理由！')
        return
      }
      this.btnLoading = true;
      this.form.id = this.details.id;
      authenticationService.disabilityauthAudit(this.form).then(res => {
        if (res && res.data.code == 200) {
          this.$message.success('提交成功！')
          this.dialogVisible = false;
          this.$emit('change')
        }
        this.btnLoading = false;
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>